<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head><title>Word of the Day</title>

<!--
<script src="http://www.google.com/jsapi?key=ABQIAAAANU8OAqbJPAHXV4SpKuTEvhQx6TWrfC8bNfnC-vtzzHJYkwhD6xSt50-Z_44EojojRLDiBj3kn932Rw" type="text/javascript"></script>
-->
<!--
TODO:
    0) handle multiple wotd
    1) Need to conquer multiple queries for QOTD
    1.5) count multiple wotd and multiple previous wotd separately
    2) use calendar (AJAX) get instead of reload
    3) Separate positioning CSS from styling CSS
    4) after #6, produce several themes
	5) Get working with jsapi key??
    6) Popup to configure timing and sources

Wish List
	. Each panel should have its own timer
  Panel Types:
    . wotd
    . previous
    . qotd
    . announce
-->
<style type="text/css">
html, body  {height: 99%; font-family: "Trebuchet MS",sans-serif; background-color: #000000; color: #bbbbbd; text-align:center;}
.hugeItem  { font-size:230px; }
.largeItem  { font-size:168px; }
.mediumItem { font-size:96px; } 
.smallItem  { font-size:36px; }
.tinyItem  { font-size:18px; }
#container { position: relative; min-height: 100%; }
#footer { position: absolute; bottom: 10px; left: 0%; right: 0%; font-size:36px; }
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript" src="date-en-US.js"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("gdata", "2.x", {packages: ["calendar"]});

var wotdPanels = [ ];
var wotdCurrentPanel = 0;
var dwellTime = 4000;
var fadeTime = 2000;
var timer;

var callback = function (result) {
    var entries = result.feed.getEntries();
    var eventTitle = entries.shift().getTitle().getText();
    wotdPanels.push('<div class="display"><div class="hugeItem">' + eventTitle + '</div><div id="footer">Word of the Day</div></div>');

    var pastWords = [ ];
    for (var i = 0; i < entries.length; i++) {
        pastWords.push(entries[i].getTitle().getText() + '<br/>');
    }
    wotdPanels.push('<div class="display"><div class="largeItem">' + pastWords.join('') + '</div><div id="footer">Previous Words of the Day</div></div>');
    
    $(function () {
        function showPanel() {
            $('div.display').replaceWith(wotdPanels[wotdCurrentPanel]);
            wotdCurrentPanel++;
            timer = setTimeout(switchFade,4400);
        }

        function switchFade() {
            $('div.display').fadeOut(fadeTime,function(){
                if(wotdCurrentPanel >= wotdPanels.length) {
                    wotdCurrentPanel = 0;
                }
                showPanel();
            });
        }
        showPanel();
    });
};
    
// Error handler to be invoked when getEventsFeed() produces an error
var handleError = function (error) {
    $('div.display').replaceWith('<pre>' + error + '</pre>');
};

function _run() {
    var feedUrl = "https://www.google.com/calendar/feeds/u6g675oejpdha4pncv50rmi8tc%40group.calendar.google.com/public/full";
    var maxResults = 4;
    var daysBack = -30;
    var calendarService = new google.gdata.calendar.CalendarService('LiquidChicken-wotdDisplayer-1.0');
    var query = new google.gdata.calendar.CalendarEventQuery(feedUrl);
    query.setOrderBy('starttime');
    query.setSortOrder('descending');
    var maxDate = new google.gdata.DateTime(Date.today());
    var minDate = new google.gdata.DateTime(Date.today().add({days: daysBack}));
    query.setMaximumStartTime(maxDate);
    query.setMinimumStartTime(minDate);
    query.setMaxResults(maxResults); // Keep us out of trouble
    calendarService.getEventsFeed(query, callback, handleError);
}

google.setOnLoadCallback(_run);


</script>
</head>

<body>
<div id="container">
  <div class="display">
      <div class="largeItem"/>
      <div id="footer">&nbsp;</div>
  </div>
</div>
</body>
</html>
